import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
// 配置路由表
const routes = [
  // 配置登录页面路由
  { path: "/login", name: "login", component: () => import("@/views/login") },
  // 配置页面组件布局路由
  {path: "/",
  // name: "layout", // 如果父路由有默认子路由，那么它的name没有意义
  component: () => import("@/views/layout"),
    children: [
      {
        path: "", // 默认子路由，只能有一个
        name: "home",component: () => import("@/views/home"),},
      {path: "/qa",name: "qa",component: () => import("@/views/qa")},
      {path: "/video",name: "video",component: () => import("@/views/video")},
      {path: "/my",name: "my",component: () => import("@/views/my")},
    ],
  },
  {path:'/search',name:'search',component:()=>import('@/views/search')},
  {path: '/article/:articleId',name: 'article',component: () => import('@/views/article'),
   props: true// 开启props传参，说白了就是把路由参数映射到组件的props中
  },
  {path:'/user/profile',name:'user-profile',component:()=>import('@/views/user-profile')},
];
const router = new VueRouter({
  routes,
});
export default router;
